<template>
  <a-card :title="mode + ' Article'" hoverable type="inner">
    <!--<a href="#" slot="extra">more</a>-->
    <a-form :autoFormCreate="(form)=>{this.form = form}">
      <a-form-item label="Title"
                   fieldDecoratorId="title"
                   :fieldDecoratorOptions="{rules:[{required:true}]}">
        <a-input/>
      </a-form-item>

      <a-form-item label="Content"
                   fieldDecoratorId="content"
                   :fieldDecoratorOptions="{rules:[{required:true}]}">
        <a-textarea rows="15" v-model="article.content"/>
      </a-form-item>

      <a-form-item label="Tags">
        <template v-for="tag in article.tags">
          <a-tag color="green" :key="tag" closable :afterClose="() => handleClose(tag)">
            {{tag}}
          </a-tag>
        </template>
        <a-input
          v-if="inputVisible"
          ref="input"
          type="text"
          size="small"
          :style="{ width: '78px' }"
          :value="inputValue"
          v-model="inputValue"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"/>
        <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
          <a-icon type="plus"/>
          New Tag
        </a-tag>
      </a-form-item>

      <a-form-item label="Options">
        <a-checkbox v-model="article.visible">Visible</a-checkbox>
        <a-checkbox v-model="article.commentable">Allow Comment</a-checkbox>
        <a-checkbox v-model="article.topped">Pinned Top</a-checkbox>
      </a-form-item>

      <a-form-item :wrapperCol="{span:12}">
        <a-button type='primary' @click="handleSubmit">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import api from '../../api'

  export default {
    name: 'modify-article',
    data () {
      return {
        inputVisible: false,
        inputValue: '',
        article: {
          id: '',
          title: '',
          content: '',
          commentable: true,
          topped: false,
          visible: true,
          tags: ['安全'],
        }
      }
    },
    mounted () {
      if (this.mode === 'Edit') {
        this.getArticle(this.$route.params.id)
      }
    },
    methods: {
      getArticle (id) {
        api.getArticle(id).then(resp => {
          let tags = []
          let data = resp.data.data
          for (let tag of data.tags) {
            tags.push(tag.name)
          }
          Object.assign(this.article, data, {tags})
          this.form.setFieldsValue({
            title: data.title,
            content: data.content,
          })
        })
      },
      handleClose (removedTag) {
        this.article.tags = this.article.tags.filter(tag => tag !== removedTag)
      },

      showInput () {
        this.inputVisible = true
        this.$nextTick(function () {
          this.$refs.input.focus()
        })
      },
      handleInputConfirm () {
        const inputValue = this.inputValue
        let tags = this.article.tags
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue]
        }
        Object.assign(this, {
          inputVisible: false,
          inputValue: '',
        })
        this.article.tags = tags
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            if (this.mode === 'Edit') {
              var func = api.updateArticle
            } else {
              func = api.addArticle
            }
            Object.assign(this.article, values)
            func(this.article).then(() => {
              this.$message.info("success")
            })
          }
        })
      },
    },
    computed: {
      mode () {
        let name = this.$route.name
        return name === 'add-article' ? 'New' : 'Edit'
      }
    }
  }
</script>

<style scoped>
  input {
    outline: 0;
    border-width: 0 0 2px;
  }

  input:focus {
    border-right-width: 0 !important;
    box-shadow: 0 0 0 0;
  }

  textarea {
    max-height: 600px;
    overflow-y: scroll;
  }

</style>
